<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">
				<a-search :isOk="false" @change="searchChange" />
			</block>
		</cu-custom>
		<a-fixed :height="40">
			<a-tabs @click="inquire" :row="3" type="border" :value="tabs"></a-tabs>
		</a-fixed>
		<a-scroll :request="get" ref="aScroll" :parm="{pageSize:10000}">
			<template #item="{row:x,index}">
				<a-list :value="x">
					<template #top-right>
						<view style="font-size: 16px;opacity: .7;">{{x.phone}}</view>
					</template>
					<template #bottom-right>
						<view>
							<a :href="'tel:'+x.phone" class="iconfont icon-dianhua" @click.stop></a>
							<text class="iconfont icon-duanxin"></text>
						</view>
					</template>
					<template #default="{row}">
						<a-list :hide-icon="true" :value="x" v-for="x in row">
							<template #top-right>
								<view style="font-size: 16px;opacity: .7;">{{x.phone}}</view>
							</template>
							<template #bottom-right>
								<view>
									<a :href="'tel:'+x.phone" class="iconfont icon-dianhua" @click.stop></a>
									<text class="iconfont icon-duanxin"></text>
								</view>
							</template>
						</a-list>
					</template>
				</a-list>
			</template>
		</a-scroll>

		<view class="bottom-a-tabs">
			<a-tabs color="#0055ff" :height="50" type="border" :value="nav" :disabled='true' @click="go">
				<template #book="{row,index}">
					<text class="iconfont icon-tongxunlu" style="font-size: 1.2em;"></text>
					通讯录
				</template>
				<template #msg="{row,index}">
					<text class="iconfont icon-liaotianjilu" style="font-size: 1.2em;"></text>
					聊天记录
				</template>
			</a-tabs>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from "@/A/utils/api";
	export default {
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		data() {
			return {
				tabs: [{
					name: "全部"
				}, {
					name: "老师"
				}, {
					name: "学生"
				}],
				tabsParm:{
					name: "全部"
				},
				searchText: "",
				nav: [{
					slot: "book"
				}, {
					slot: 'msg',
					disabled: true,
					url: '/pages/parents/msgList/msgList'
				}]
			}
		},
		methods: {
			go({
				url
			}) {
				uni.redirectTo({
					url
				});
			},
			get(parm = {}) {
				const data = new Array(20).fill({
					name: "喜来乐",
					sonTitle: "神医",
					phone: "1887765665",
					unfold: true,
					img: "https://weiliicimg6.pstatp.com/weili/l/323181772063899692.webp",
					child: new Array(2).fill({
						name: "王重阳",
						sonTitle: "学生",
						phone: "19908887665"
					})
				});
				console.log('请求：' + JSON.stringify({
					...parm,
					...this.tabsParm,
					searchText: this.searchText
				}))
				return new Promise(r => {
					setTimeout(e => {
						r({
							total: 20,
							data
						})
					}, 1000);
				});
			},
			inquire(e) {
				this.tabsParm = e;
				this.$refs.aScroll.get(true);
			},
			searchChange(e) {
				this.searchText = e;
				this.$refs.aScroll.get(true);
			}
		}
	}
</script>

<style lang="scss">
	.icon-duanxin,
	.icon-dianhua {
		font-size: 28px;
		margin: 0 5px;
		color: #0055ff;
	}

	.bottom-a-tabs {
		height: 50px;

		.a-tabs {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 998;
			padding-bottom: 2px;
			font-size: 18px;

			&::after {
				top: 0;
				bottom: auto;
			}
		}
	}
</style>
